<template>
  <div class="p-8">
    <el-card class="rounded-3xl shadow-md">
      <template #header>
        <div class="card-header">
          <span>宿舍列表</span>
        </div>
      </template>
      <el-table v-loading="loading" ref="multipleTableRef" :data="tableData" style="width: 100%">
        <el-table-column property="dNumber" label="楼栋" width="120" />
        <el-table-column property="rMax" label="容纳人数" />
        <el-table-column property="rNow" label="已有人数" />
        <el-table-column property="rNumber" label="门牌号" />
        <el-table-column label="是否已满">
          <template #default="scope">
            <div>
              <span
                class="text-green-600 bg-green-100 dark:bg-green-900 dark:text-green-300 px-2 py-1 rounded-md"
                v-if="scope.row.rMax != scope.row.rNow"
                >否</span
              >
              <span
                class="text-red-600 bg-red-100 dark:bg-red-900 dark:text-red-300 px-2 py-1 rounded-md"
                v-else
                >是</span
              >
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template #default="scope">
            <div>
              <el-button type="primary" link @click="selectDormitory(scope.row)"
                >选择</el-button
              >
              <el-button type="danger" link @click="cancelDormitory(scope.row)"
                >退选</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <div class="flex justify-between items-center">
          <p class="text-sm text-gray-400">
            共 {{ total }} 条记录 第 {{ currentPage }} / {{ totalPage }} 页
          </p>
          <div class="flex items-center gap-4">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="pageSize"
              :background="true"
              layout="prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
            />
            <el-select
              class="w-32"
              v-model="pageSize"
              @change="handleSizeChange"
            >
              <el-option
                v-for="option in pageSizeOptions"
                :value="option"
                :key="option"
                :label="`${option}条/页`"
              >
                {{ option }}条/页
              </el-option>
            </el-select>
            <div class="flex items-center gap-2">
              <p class="text-sm text-gray-400">跳至</p>
              <el-input-number
                :min="1"
                :max="totalPage"
                @change="handleCurrentChange"
                :controls="false"
                class="w-16"
              />
              <p class="text-sm text-gray-400">页</p>
            </div>
          </div>
        </div>
      </template>
    </el-card>
    <SelectDrawer
      v-model:drawer="isDrawerOpen"
      :itemData="drawerItemData"
      :type="drawerType"
      @refresh-list="getShowInfo"
    />
  </div>
</template>
<script setup>
import { ApiDormitory } from "@/core/api/index.js";
import { computed, onMounted, ref } from "vue";
import SelectDrawer from "./SelectDrawer.vue";

const loading = ref(false);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(10);
const totalPage = computed(() => Math.ceil(total.value / pageSize.value));
const pageSizeOptions = [10, 20, 50, 100];
const tableData = ref([]);

const isDrawerOpen = ref(false);
const drawerItemData = ref({});
const drawerType = ref("select");

const getShowInfo = async () => {
  loading.value = true;
  const response = await ApiDormitory.getDormitoryList({
    page: currentPage.value,
    size: pageSize.value,
  });
  if (response.code == 0) {
    tableData.value.splice(0, tableData.value.length, ...response.data.list);
    total.value = response.data.total ? response.data.total : 10;
  }
  loading.value = false;
};

const toggleDrawer = () => {
  isDrawerOpen.value = !isDrawerOpen.value;
};

const handleSizeChange = (size) => {
  pageSize.value = size;
  getShowInfo();
};
const handleCurrentChange = (page) => {
  currentPage.value = page;
  getShowInfo();
};
const selectDormitory = (row) => {
  drawerItemData.value = row;
  drawerType.value = "select";
  toggleDrawer();
};
const cancelDormitory = (row) => {
  drawerItemData.value = row;
  drawerType.value = "cancel";
  toggleDrawer();
};

onMounted(() => {
  getShowInfo();
});
</script>
